<template>
  <div>
    <Row>
      <Col span="18">
        <div class="map">
          <gd-map ref="map"/>
        </div>
      </Col>
      <Col span="6">
        <div class="drivingInfo">
          <div v-if="flag">
            <Card class="card">
              <p><span>实时违规记录:</span></p>
              <List style="height: 130px">
                <div v-for="(record,key) in  illegalActions">
                  <ListItem>{{ record.time }}—工号为:{{ record.workId }}—检测到:{{ record.action }}</ListItem>
                </div>
              </List>
            </Card>
          </div>
          <div v-else>
            <Card class="card">
              <img src="./gd-map/car.png">
              <p><span>姓名: </span>{{ driver.name }}</p>
              <p><span>工号: </span>{{ driver.workId }}</p>
              <p><span>车牌号: </span>{{ driver.carId }}</p>
              <p><span>驾车开始时间: </span>{{ driver.startTime }}</p>
              <p><span>违规记录: </span></p>
              <List style="height: 130px">
                <div v-for="(record,key) in  driver.records">
                  <ListItem>{{ record.time }}——{{ record.action }}</ListItem>
                </div>
              </List>
            </Card>
          </div>
          <div class="buttons">
            <Button type="primary" @click="this.startTrack">开启车辆跟踪</Button>
            <Button type="error" @click="this.destroyTrack">关闭车辆跟踪</Button>
            <span class="span-input">
               <Input v-model="messageData.account" placeholder="请输入驾驶员工号" style="width: 150px"/>
            </span>
            <Button type="success" @click="this.search">搜索</Button>
          </div>
        </div>
        <div class="video" >
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fah.people.com.cn%2FNMediaFile%2F2020%2F0514%2FLOCAL202005141525000470949658057.jpg&refer=http%3A%2F%2Fah.people.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642076323&t=f5b32cc30626b61d98c1ae59ef4662a5">
        </div>
        <div class="sendDiv">
          <span style="font-size:15px">信息发送</span>
          <Input v-model="messageData.message" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="Enter something..."></Input>
          <div class="buttonGroup">
              <Button type="primary" @click="send">发送信息</Button>
              <Button type="success">清空信息</Button>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import GdMap from './gd-map/gd-map'
import {sendMessage} from "../../api/data";

export default {
  data() {
    return {
      messageData: {
        account: '',
        message: ''
      },
      flag: false,
      illegalActions: [
        {
          time: '2021/12/14 19:23',
          workId: '21235412732',
          action: '抽烟行为',
        },
        {
          time: '2021/12/14 19:23',
          workId: '21235412732',
          action: '抽烟行为',
        },
        {
          time: '2021/12/14 19:23',
          workId: '21235412732',
          action: '抽烟行为',
        },
        {
          time: '2021/12/14 19:23',
          workId: '21235412732',
          action: '抽烟行为',
        },
        {
          time: '2021/12/14 19:23',
          workId: '21235412732',
          action: '抽烟行为',
        },
        {
          time: '2021/12/14 19:23',
          workId: '21235412732',
          action: '抽烟行为',
        },
      ],
      driver: {
        name: '张三',
        workId: '21235412732',
        carId: '浙A27364',
        startTime: '2021/12/14 19:23',
        records: [{
          time: '2021/12/14 19:51:24',
          action: '抽烟行为'
        },
          {
            time: '2021/12/14 19:51:27',
            action: '抽烟行为'
          },
          {
            time: '2021/12/14 19:51:29',
            action: '抽烟行为'
          }]
      },
    }
  },
  name: "index",
  components: {
    GdMap
  },
  methods: {
    startTrack() {
      this.flag = true
      this.$refs.map.startTrack()
    },
    destroyTrack() {
      this.$refs.map.destoryTrack()
    },
    search() {
      this.flag = false
    },
    send() {
      sendMessage(this.messageData).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },
  }
}
</script>

<style scoped lang="less">
.video{
  position: absolute;
  left: -320px;
}

.buttonGroup Button{
  margin-left: 25px;
  margin-right: 25px;
}

.sendDiv{
  padding: 10px;
}

.card {
  height: 400px;
  overflow: hidden;
}

.span-input {
  margin-left: 10px;
}

.buttons {
  padding-left: 20px;
  padding-right: 20px;
}

Input {

}

.video {
  background-color: #5c6b77;
  height: 178px;

  img {
    height: 178px;
    width: 300px;
  }
}


Button {
  margin: 10px;
}

.drivingInfo p {
  margin-top: 20px;

}

.info {
  /*display: inline-block;*/
  //background-color: #2d8cf0;
  width: 200px;
  margin-top: -200px;
  z-index: 99;

}
</style>
